<template>
	<view class="vip-index">

		<view class="index-top">
			<rf-navbar :title="'会员'" :src="'../../static/images/home/vip_top.png'" @click="onBack"></rf-navbar>
			<image src="../static/images/home/vip_bottom.png" style="position: fixed; width: 100%;"
				:style="{top: navBarHeight}">
			</image>
			<view class="content">
				<image src="../static/images/home/vip001.png" class="vip-bgc"></image>
				<view class="content-title">
					<view class="logo">
						<image :src="userInfo.avatar" :class="{'icon-default-avatar':!userInfo.avatar}"
							style="width: 100%; height: 100%; border-radius: 50%;" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="name">
							<view class="name-text">{{userInfo.name}}</view>
							<view class="vip">vip</view>
						</view>
						<view class="date">有效期至{{userInfo.memberExpirationDate}}</view>
					</view>
				</view>
				<view class="content-text">
					<view class="left">邀请好友即可获得VIP特权</view>
					<view>
						<button class="right" open-type="share">立即邀请</button>
					</view>
				</view>
				<view class="content-box">
					<view class="item">
						<view class="left">发邀请者：</view>
						<view class="right" style="margin-right: 20rpx;">获得VIP身份+7天<text
								style="color: #A88537;font-size: 24rpx;"
								v-if="content&&content>0">（被邀请人需要使用超级小助教获得{{content}}分成长值）</text>
						</view>
					</view>
					<view class=" item">
						<view class="left">被邀请者：</view>
						<view class="right">获得VIP身份7天</view>
					</view>
				</view>
				<!-- <view v-if="systemInfo.platform != 'ios'"> -->

				<!-- 会员选择 -->
				<view class="tab">
					<view class="cell" v-for="(item, index) in vip.slice(1)">
						<view :class="{item:selectindex==index,no_item:selectindex!=index}" @click="selectItem(index)">
							<view class="icon" v-if="selectindex==2 && index==2">推荐</view>
							<view class="title">{{item.name}}</view>
							<view class="num">
								<view class="icons">¥</view>
								<view class="num-m">{{item.preferential}}</view>
							</view>
							<view class="num numOld">
								<view class="icons">¥</view>
								<view class="num-m">{{item.amount}}</view>
							</view>
							<view class="bottom">{{item.des}}</view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="box-top">
						<view class="lobg"></view>
						<view class="lang">普通用户</view>
						<view class="lang ">VIP会员</view>
					</view>
					<view class="item">
						<view class="text">语音生成观察记录</view>
						<view class="img-icon">
							<image v-if="vip[0].recordStatus==0" class="icon-close" mode="widthFix">
							</image>
							<image v-else class="icon-check" mode="widthFix"></image>
						</view>
						<view class="img-icon">
							<image v-if="vip[selectindex+1].recordStatus==0" class="icon-close" mode="widthFix"></image>
							<image v-else class="icon-check" mode="widthFix"></image>
						</view>
					</view>
					<view class="item bg">
						<view class="text">管理幼儿数量</view>
						<view class="img-icon">{{vip[0].childCount}}</view>
						<view class="img-icon">{{vip[selectindex+1].childCount}}</view>
					</view>
					<view class="item">
						<view class="text">自动生成word版记录</view>
						<view class="img-icon">
							<image v-if="vip[0].wordStatus==0" class="icon-close" mode="widthFix">
							</image>
							<image v-else class="icon-check" mode="widthFix"></image>
						</view>
						<view class="img-icon">
							<image v-if="vip[selectindex+1].wordStatus==0" class="icon-close" mode="widthFix"></image>
							<image v-else class="icon-check" mode="widthFix"></image>
						</view>
					</view>
					<view class="item bg">
						<view class="text">AI自动分析观察实录</view>
						<view class="img-icon">
							<image v-if="vip[0].aiStatus==0" class="icon-close" mode="widthFix">
							</image>
							<image v-else class="icon-check" mode="widthFix"></image>
						</view>
						<view class="img-icon">
							<image v-if="vip[selectindex+1].aiStatus==0" class="icon-close" mode="widthFix"></image>
							<image v-else class="icon-check" mode="widthFix"></image>
						</view>
					</view>
					<view class="item bg">
						<view class="text">AI学期评价</view>
						<view class="img-icon">
							<image v-if="vip[0].aiStatus==0" class="icon-close" mode="widthFix">
							</image>
							<image v-else class="icon-check" mode="widthFix"></image>
						</view>
						<view class="img-icon">
							<image v-if="vip[selectindex+1].aiStatus==0" class="icon-close" mode="widthFix"></image>
							<image v-else class="icon-check" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="input">
					<view class="title">优惠码</view>
					<view style="height: 88rpx;">
						<!-- <u--input placeholder="请输入优惠码" border="surround" v-model="value"></u--input> -->
						<uni-easyinput placeholder="请输入优惠码" border="surround" style="background-color: #F4F7F9;"
							inputBorder="" v-model="value"></uni-easyinput>
					</view>
				</view>
				<view v-if="systemInfo.platform != 'ios'">
					<!-- <view v-if="false"> -->

					<view class="foor">
						<view class="left">
							<view class="incos">¥</view>
							<view class="num">{{vip[selectindex+1].preferential}}/{{vip[selectindex+1].name}}</view>
							<!-- <view class="right-text" v-if="selectindex==0">
								每天{{roundedNumber}}元
							</view>
							<view class="right-text" v-else>
								每月{{roundedNumber}}元
							</view> -->
						</view>
						<button class="right" :class="{btn_disabled:isDisabled}" @click="onClick"
							:disabled="isDisabled">续费VIP</button>
					</view>
				</view>
				<view v-else>
					<view class="ios_style">
						<view class="title">IOS用户暂不可在小程序内订阅</view>
						<view class="btn" @click="onClickCall">点击此处解决</view>
						<!-- <view class="wrap" style=" width: 100%;">
							<image src="../static/images/home/icons.png"
								style="width: 214rpx; height: 224rpx; position: relative; z-index: 10;"></image>
							<view style="position: relative;z-index: 9; top: -90rpx; width: 100%;padding: 0rpx 30rpx;">
								<image src="../static/images/home/rect_bg.png" style="width: 100%; ">
								</image>
								<view class="text">
									亲爱的老师，由于Apple政策原因，小程序在苹果手机上不支持开通会员及缴费，请苹果用户在电脑端登录微信，进入“超级小助教”小程序开通会员，手机版即可正常使用。不便之处，敬请谅解～
								</view>
							</view>
						</view> -->

					</view>
				</view>

				<view class="foots"></view>
			</view>


		</view>
		<!-- 优惠券有效性 -->
		<!-- 弹出公众号客服二维码 -->
		<view class="qr">
			<u-popup :round="10" :safeAreaInsetBottom="false" :show="showQR" mode="center" @close="showQR = false">
				<view class="container">

					<image class="image" :class="{'icon-qrcode':!(QRUrl)}" :src="QRUrl" mode="widthFix"
						:show-menu-by-longpress="true"></image>
					<view class="title">长按识别二维码</view>
					<view class="btn" @click="showQR = false">取消</view>

				</view>
			</u-popup>
		</view>
		<!-- load -->
		<rf-load :loading="loading" title="加载中..."></rf-load>

	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';

	import {
		getMemberList,
		getServiceQRCode,
		createOrder,
		getAgreement,
	} from '@/api/user.js'
	export default {
		data() {
			return {
				statusBarHeight: this.statusBarHeight,
				navBarHeight: this.navBarHeight,
				menuHeight: this.menuHeight,
				menuRight: this.menuRight,
				menuTop: this.menuTop,
				menuBotton: this.menuBotton,

				memberExpirationDate: "",
				selectindex: 2,
				vip: [],

				value: '', // 优惠码


				isDisabled: false, // 防止续费按钮连续点击
				content: 0, // 获取七天vip权限，邀请用户要达到的成长值
				systemInfo: {},

				showQR: false, // 显示客服二维码
				QRUrl: "",

				loading: false, // 加载中提示
			};
		},
		computed: {
			...mapState(['userInfo', 'hasLogin']),
			roundedNumber() {
				if (this.systemInfo.platform == "ios") {
					return 0
				}
				if (this.selectindex == 0) {
					return Math.ceil(this.vip[this.selectindex + 1].preferential / 30 *
						100) / 100
				}
				return Math.ceil(this.vip[this.selectindex + 1].preferential / this.vip[this.selectindex + 1].duration *
					100) / 100
			}
		},
		onLoad() {
			console.log("this.userInfo");
			this.systemInfo = uni.getSystemInfoSync()
			console.log("systemInfo: " + JSON.stringify(this.systemInfo));

			console.log(this.userInfo);

			// if (this.systemInfo.platform != "ios") {
			// 	this.getlist()
			// }
			this.getlist()
			this.get_vip_Grow()


		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				var shareId = this.userInfo.id;
				return {
					title: "邀请好友，获VIP特权",
					path: '/pages/home/home?shareId=' + shareId,
					imageUrl: "https://superta.noboyun.com/static/share/default.png", //数据返回的图片数据
					success: function(res) {
						// 转发成功
						console.log(res)
					},
					fail: function(res) {
						// 转发失败
						console.log(res)
					}
				}
			} else { //用户点击右上角3个点分享（小程序端）
				var shareId = this.userInfo.id;
				return {
					title: "邀请好友，获VIP特权",
					path: '/pages/home/home?shareId=' + shareId,
					imageUrl: "https://superta.noboyun.com/static/share/default.png", //数据返回的图片数据
					success: function(res) {
						// 转发成功
						console.log(res)
					},
					fail: function(res) {
						// 转发失败
						console.log(res)
					}
				}
			}
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},
			longpressQR() {
				// 长按客服二维码
				uni.navigateBackMiniProgram({
					success(res) {
						console.log(res.result)
						// 此处进行操作
					}
				})
			},
			onClickCall() {
				this.loading = true;
				const data = {
					"memberId": this.vip[this.selectindex + 1].id,
					"couponCode": this.value,
					"type": "0",
				};
				getServiceQRCode(data).then(res => {
					console.log("getServiceQRCode" + JSON.stringify(res));
					if (res.code == 200) {
						this.QRUrl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=" + res.data
						this.showQR = true;
					}
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					uni.showToast({
						icon: "none",
						title: err.message,
					});

				})
			},
			get_vip_Grow() {
				let _that = this;
				getAgreement(3).then(res => {
					console.log("res: " + JSON.stringify(res));
					_that.content = res.data.content
				}).catch(err => {

				})
			},
			back() {
				uni.navigateBack();
			},
			selectItem(e) {
				this.selectindex = e
			},
			formatArray(arr) {

				return arr.map(item => {
					return {
						id: item.id,
						name: item.name, // 会员名称
						amount: item.amount, // 价格
						preferential: item.preferential, // 优惠价
						type: item.type,
						des: item.description,
						wordStatus: item.wordStatus, // 生成word 版记录
						childCount: item.childCount, // 管理幼儿数量
						aiStatus: item.aiStatus, // ai 自动分析
						duration: item.duration, // 会员时间
						recordStatus: item.recordStatus, //  语音观察记录
					}
				})
			},
			getlist() {
				let _that = this
				getMemberList().then(res => {
					_that.vip = _that.formatArray(res.data)
					console.log("res: " + JSON.stringify(res));
				}).catch(err => {

				})
			},
			onClick() {
				this.isDisabled = true;
				const data = {
					"memberId": this.vip[this.selectindex + 1].id,
					"couponCode": this.value,
				};
				createOrder(data).then(res => {
					uni.setStorageSync("createorder", JSON.stringify(res.data))
					setTimeout(() => {
						this.isDisabled = false;
						uni.navigateTo({
							url: "/pages-sub/order/order"
						})
					}, 1000)
				}).catch(err => {
					console.log("-----", err.message);

					wx.showToast({
						title: err.message,
						icon: 'none'
					})

					this.isDisabled = false;
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep.u-input__content {
		background-color: #f4f7f9;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	::v-deep.uni-input-input:disabled {
		background-color: #f4f7f9;
	}

	::v-deep.u-form-item__body__right__content {
		background-color: #f4f7f9;
	}

	::v-deep.u-input {
		background-color: #f4f7f9;
	}

	::v-deep.u-border {
		border-color: #f4f7f9 !important;
	}

	::v-deep.u-form-item__body__left__content__label {
		margin: 0 0 14rpx 0;
		font-weight: 500;
		color: #000000;
		font-size: 32rpx;
	}

	.vip-index {
		.index-top {
			width: 100%;
			height: 480rpx;
			// background: linear-gradient(179deg, #ffeecd 0%, #ffffff 100%);

			.top {
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 240rpx;

				.text {
					font-size: 32rpx;
					font-weight: 600;
					color: #3a3d4b;
				}
			}

			.content {
				position: relative;
				top: 60rpx;

				.vip-bgc {
					position: absolute;
					height: 462rpx;
					width: 686rpx;
					left: 32rpx;
					top: -50rpx;
				}

				.content-title {
					// position: absolute;
					margin: 0 auto;
					display: flex;
					align-items: center;
					width: 80%;
					height: 178rpx;
					transform: translateY(-30px);

					.logo {
						z-index: 99;
						width: 90rpx;
						height: 90rpx;
						background-color: #fff;
						border-radius: 50%;
						margin-right: 30rpx;
						margin-left: 30rpx;
					}

					.right {
						z-index: 99;

						.name {
							display: flex;

							.name-text {
								font-size: 34rpx;
								font-weight: 500;
								color: #562900;
								margin-right: 20rpx;
							}

							.vip {
								width: 60rpx;
								height: 36rpx;
								background: #ff8b00;
								border-radius: 20rpx;
								color: #fff;
								line-height: 36rpx;
								text-align: center;
								font-size: 24rpx;
								font-weight: 600;
							}
						}

						.date {
							font-size: 24rpx;
							color: #a88537;
						}
					}
				}

				.content-text {
					transform: translateY(-30px);
					width: 82%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 20rpx auto;

					.left {
						z-index: 99;
						font-size: 28rpx;
						font-weight: 500;
						color: #562900;
					}

					.right {
						z-index: 99;
						width: 180rpx;
						height: 56rpx;
						background: #ff8b00;
						border-radius: 28rpx;
						color: #fff;
						line-height: 56rpx;
						text-align: center;
						font-size: 24rpx;
					}
				}

				.content-box {
					transform: translateY(-30px);
					margin: 0 auto;
					width: 630rpx;
					height: 160rpx;
					background: #ffffff;
					border-radius: 20rpx;
					opacity: 0.5;
					padding: 20rpx 0;
					box-sizing: border-box;

					.item {
						display: flex;
						// justify-content: flex-start;
						align-items: flex-start;
						// height: 60rpx;
						margin-left: 28rpx;
						opacity: 1 !important;

						.left {
							font-size: 28rpx;
							font-weight: 600;
							color: #562900;
							line-height: 40rpx;
							white-space: nowrap;

						}

						.right {
							font-size: 28rpx;
							font-weight: 600;
							color: #ff8b00;
							line-height: 40rpx;
						}
					}
				}

				.ios_style {
					display: flex;
					flex-direction: column;
					align-items: center;


					margin: 50rpx 32rpx;
					padding: 28rpx;
					background: #FFF7E3;
					border-radius: 8rpx;
					border: 2rpx solid #FECC56;

					.title {

						font-size: 28rpx;
						font-weight: 400;
						color: #562900;
						line-height: 40rpx;
					}

					.btn {
						margin-top: 20rpx;
						width: 264rpx;
						height: 68rpx;
						background: #FECF5E;
						border-radius: 12rpx;
						color: #3A3D4B;
						line-height: 68rpx;
						font-size: 28rpx;
						text-align: center;
					}

					.wrap {
						margin-top: 48rpx;

						text-align: center;
						// background-color: green;
						// margin: 0 10rpx;

						.text {
							font-size: 28rpx;
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: 400;
							color: #472F21;
							line-height: 44rpx;
							text-align: left;

							position: absolute;

							top: 140rpx;
							left: 0;
							margin: 0 30rpx;
							padding: 0 40rpx;
							// 缩进
							display: block;
							text-indent: 56rpx;



						}
					}
				}

			}

			.tab {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 210rpx;
					height: 248rpx;
					background: #fff9ef;
					border-radius: 20rpx;
					border: 2rpx solid #fecc56;
					position: relative;
					box-sizing: border-box;
					padding: 30rpx;

					.icon {
						position: absolute;
						left: 0;
						top: -20rpx;
						width: 64rpx;
						height: 36rpx;
						background: linear-gradient(115deg, #ffd292 0%, #ffe8ca 100%);
						border-radius: 8rpx 12rpx 8rpx 12rpx;
						z-index: 99;
						font-size: 24rpx;
						text-align: center;
						font-weight: 400;
						color: #562900;
						line-height: 36rpx;
					}

					.title {
						font-size: 28rpx;
						font-weight: 500;
						color: #562900;
						text-align: center;
						white-space: nowrap;
					}

					.num {
						display: flex;
						align-items: baseline;
						justify-content: center;

						.icons {
							font-size: 28rpx;
							font-weight: 500;
							color: #FF8B00;
						}

						.num-m {
							font-size: 48rpx;
							font-weight: 600;
							color: #FF8B00;
						}

					}

					.numOld {
						.icons {
							font-weight: 400;
							color: #AFA899;
						}

						.num-m {
							font-size: 28rpx;
							font-weight: 400;
							color: #AFA899;
							text-decoration: line-through;
						}
					}

					.bottom {
						width: 174rpx;
						height: 42rpx;
						background: #ffe9c6;
						border-radius: 8rpx;
						font-size: 24rpx;
						text-align: center;
						font-weight: 400;
						color: #562900;
						line-height: 42rpx;
					}
				}

				.no_item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 210rpx;
					height: 248rpx;
					background: #f4f5f6;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 30rpx;

					.title {
						font-size: 28rpx;
						font-weight: 500;
						color: #3a3d4b;
						text-align: center;
						white-space: nowrap;
					}

					.num {
						display: flex;
						align-items: baseline;
						justify-content: center;

						.icons {
							font-size: 28rpx;
							font-weight: 500;
							color: #3a3d4b;
						}

						.num-m {
							font-size: 48rpx;
							font-weight: 600;
							color: #3a3d4b;
						}
					}

					.numOld {
						.icons {
							font-weight: 400;
							color: #AFA899;
						}

						.num-m {
							font-size: 28rpx;
							font-weight: 400;
							color: #AFA899;
							text-decoration: line-through;
						}
					}

					.bottom {
						width: 174rpx;
						height: 42rpx;
						background: #e6e6e8;
						border-radius: 8rpx;
						font-size: 24rpx;
						text-align: center;
						font-weight: 400;
						color: #562900;
						line-height: 42rpx;
					}
				}
			}

			.box {
				height: 488rpx;
				width: 686rpx;
				margin: 40rpx auto;

				.box-top {
					width: 686rpx;
					height: 80rpx;
					background: #fecf5e;
					border-radius: 8rpx 8rpx 0rpx 0rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 30rpx;
					box-sizing: border-box;

					.lobg {
						flex: 1;
					}

					.lang {
						flex: 0.5;
						text-align: center;
					}

				}

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80rpx;
					padding-right: 30rpx;
					box-sizing: border-box;

					&.bg {
						background: #fff7e3;
					}

					.text {
						flex: 1;
						font-size: 24rpx;
						font-weight: 400;
						color: #3a3d4b;
						padding-left: 20rpx;
					}

					.img-icon {
						text-align: center;
						flex: 0.5;
						width: 32rpx;
						height: 28rpx;

						image {
							width: 32rpx;
							height: 28rpx;
						}
					}
				}
			}

			.input {
				padding: 0 40rpx;

				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
					line-height: 40rpx;
					margin-bottom: 16rpx;
				}
			}

			.foor {
				margin: 40rpx auto;
				display: flex;
				height: 80rpx;
				width: 90%;
				border-radius: 40rpx;

				.left {
					width: 438rpx;
					height: 80rpx;
					background: #ffe398;
					border-radius: 40rpx 0 0 40rpx;
					display: flex;
					align-items: center;

					.incos {
						font-size: 20rpx;
						font-weight: 500;
						color: #562900;
						margin-left: 40rpx;
					}

					.num {
						font-size: 30rpx;
						font-weight: 600;
						color: #562900;
						margin-right: 48rpx;
					}

					.right-text {
						font-size: 28rpx;
						font-weight: 400;
						color: #562900;
					}
				}

				.right {
					width: 248rpx;
					height: 80rpx;
					background: #ff8b00;
					border-radius: 0rpx 40rpx 40rpx 0rpx;
					display: flex;
					color: #fff;
					align-items: center;
					justify-content: center;
				}

				.btn_disabled {
					background: darkgray;
				}
			}



			.foots {
				margin-bottom: 30rpx;
				height: 40rpx;
			}
		}

		.qr {


			.container {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 80rpx;
				padding-bottom: 52rpx;

				.image {
					width: 320rpx;
					height: 320rpx;
				}

				.title {
					margin-top: 28rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #3A3D4B;
					line-height: 40rpx;
				}

				.btn {

					margin-top: 28rpx;
					width: 244rpx;
					height: 72rpx;
					background: #F2F3F7;
					border-radius: 44rpx;
					line-height: 72rpx;
					text-align: center;

					font-size: 28rpx;
					font-weight: 400;
					color: #3A3D4B;
				}

			}


		}
	}

	.popup {

		.container {
			width: 480rpx;
			height: 330rpx;
			margin-top: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;

			.img {
				width: 120rpx;
				height: 120rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #3A3D4B;
			}

			.content {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #77798D;

			}
		}
	}
</style>